
// 左右滚动
let lriconLeft = document.querySelector(".lricon-left");
let lriconRight = document.querySelector(".lricon-right");
let lriconMiddleLong = document.querySelector(".lricon-middle-long");
let scollContentTop = document.querySelector(".scoll-content-top");

lriconLeft.onclick = function (){
    lriconMiddleLong.className = 'lricon-middle-long-left';
    scollContentTop.scrollTo({
        left:0,
        behavior:"smooth"
    });
}
lriconRight.onclick = function (){
    lriconMiddleLong.className = 'lricon-middle-long-right';
    scollContentTop.scrollTo({
        left:scollContentTop.scrollWidth,
        behavior:"smooth"
    });
}
let sctrItem3 = document.querySelector(".sctr-item3");
let sctrItem3ci = document.querySelector(".sctr-item3-content-itemShow");

sctrItem3.onmouseover = function (){
    sctrItem3ci.style.display = 'block';
}
sctrItem3.onmouseout = function (){
    sctrItem3ci.style.display = 'none';
}


//轮播图
let scollul = document.querySelector(".scoll-lul");
let scollspans = document.querySelectorAll(".scoll-i span");
let scolltexts = document.querySelectorAll(".scoll-lul li .scoll-ltext");
let arrowimgs = document.querySelectorAll(".arrowimg");

let i = 0;
let scollClose;
let flag = true;

// 左边轮播图
scollClose = setInterval(()=>{
    // console.log( scolltexts[i]);
    scolltexts[i].style.display = "block";
    scollspans.forEach((item)=>{
        item.className = "scoll-span";
    })
    scollspans[i%5].className = "scoll-span span1";
    scollul.style.cssText = "transition-duration:0.3s; transform:translateX(-"+ 940 * i +"px);";
    if(i == 5){
        i=0;
        setTimeout(() => {
            scollul.style.cssText = "transform:translateX(0px);";
        }, 500);
    }
    i++;
    // console.log(scolllis.offsetLeft);
},5000)

//按钮轮播图
arrowimgs[0].onclick = function (){
    flag = false;
    if( flag = false){
        clearInterval(scollClose);
    }
    -- i;
    scolltexts[i].style.display = "block";
    scollspans.forEach((item)=>{
        item.className = "scoll-span";
    })
    scollspans[i%5].className = "scoll-span span1";
    if(i<1){
        i=5;
        setTimeout(() => {
            scollul.style.cssText = "transform:translateX(0px);";
        }, 500);
    }
    scollul.style.cssText = "transition-duration:0.3s;transform:translateX(-"+ 940 * (i) +"px);";
    setTimeout(()=>{
        flag = true;
    },3000);
}

arrowimgs[1].onclick = function (){
    flag = false;
    if(flag = false){
        clearInterval(scollClose);
    }
    i++;
    i = i%5;
    console.log(i);
    scolltexts[i].style.display = "block";
    scollspans.forEach((item)=>{
        item.className = "scoll-span";
    })
    scollspans[i%5].className = "scoll-span span1";
    if(i>5){
        i=1;
        setTimeout(() => {
            scollul.style.cssText = "transform:translateX(0px);";
        }, 500);
    }
    scollul.style.cssText = "transition-duration:0.3s;transform:translateX(-"+ 940 * i+"px);";
    // setTimeout(()=>{
    //     flag = true;
    // },5000);
}

scollspans.forEach((span,index)=>{
    span.onclick = function (){
        flag = false;
        if(flag = false){
            clearInterval(scollClose);
        }
        scolltexts[index].style.display = "block";
        scollspans.forEach((span)=>{
            span.className = "scoll-span";
        })
        scollspans[index%5].className = "scoll-span span1";
        scollul.style.cssText = "transition-duration:0.3s;transform:translateX(-"+ 940 * index+"px);";
    }
})

let sctrArrows = document.querySelectorAll(".sctrArrow");
let checkAllSpan = document.querySelectorAll(".checkAll-span");

sctrArrows.forEach((items,index)=>{
    items.onmouseover = function (){
        checkAllSpan[index].classList.add("checkAll-span-hover");
    }
    items.onmouseout = function (){
        checkAllSpan[index].classList.remove("checkAll-span-hover");
    }
})

// 微信联系我们
let weChat = document.querySelector(".weChat");
let chatBox = document.querySelector(".chatBox");
let chatImg = document.querySelector(".chatImg");
let chatDivSpan = document.querySelector(".chatDivSpan");
//微信联系我们
weChat.onmouseover = function (){
    chatBox.className = 'chatBox1';
    chatImg.className = 'chatImg1';
    chatDivSpan.className = 'chatDivSpan1';
}
weChat.onmouseout = function (){
    chatBox.className = 'chatBox';
    chatImg.className = 'chatImg';
    chatDivSpan.className = 'chatDivSpan';
}

//视频
let videobottom = document.querySelector(".video-bottom");
let videosbox = document.querySelector(".video-sbox");
let videobigbox = document.querySelector(".video-bigbox video");
videobottom.onclick = function (){
    videobottom.style.display = "none";
    videosbox.style.background = "none";
    videobigbox.style.display = "block";
    videobigbox.play();
}

//聊天信息
//第一个框
let message = document.querySelector(".message");
let messagetext = document.querySelector(".message-text");
let messagemain1 = document.querySelector(".message-main1");
let messagemain2 = document.querySelector(".message-main2");
let flag0 = true;
// 网页加载事件
window.onload=function(){
    // 获取导航栏距上的高度
    let messageH=message.offsetTop;//margin+其他元素
    // let messageT = message.height;
    // console.log(messageT);
    console.log(messageH);
    // 滚动条事件
    window.onscroll=function(){
        if(flag0){
            messagemain1.style.display = "block";
        }
        // 获取滚动条高度
        let scollH=document.documentElement.scrollTop||document.body.scrollTop;
        // 判断
        if(scollH>=(messageH - 100)){
            flag0 = false;
            // 给当前导航栏设置固定定位
            messagemain1.style.display = "none";
            messagemain2.style.display = "block";
            messagetext.style.position="fixed";
            messagetext.style.top="80px";
        }else{
            // 恢复成默认的标准文档流  静态定位
            messagetext.style.position="static";
        }
        if(scollH>=(messageH +490 )){
            messagetext.style.position="relative";
        }
    }
}

let messagespans = document.querySelectorAll(".text-span");
let textspan =document.querySelectorAll(".text-spanDiv");
let textspan1 =document.querySelector(".text-spanDiv1");
let messagemain = document.querySelector(".message-main");
let messagecontent = document.querySelector(".message-content");
let meeting = document.querySelector(".meeting");
messagespans.forEach((span,index)=>{
    span.onclick = function (){
        if(index == 0){
            messagemain.style.display = "block";
            messagecontent.style.display = "none";
            meeting.style.display = "none";
            textspan1.style.display = "block";
            textspan[index].style.display = "none";
            textspan[index + 1].style.display = "none";
        }else if(index == 1){
            messagemain.style.display = "none";
            messagecontent.style.display = "block";
            meeting.style.display = "none";
            textspan[index-1].style.display = "block";
            textspan[index].style.display = "none";
            console.log(textspan[index]);
            textspan1.style.display = "none";
        }else if(index == 2){
            messagemain.style.display = "none";
            messagecontent.style.display = "none";
            meeting.style.display = "block";
            textspan[index-1].style.display = "block";
            textspan1.style.display = "none";
            textspan[index-2].style.display = "none";
        }


    }
})

// 第一个框的第二个信息框
let main2imgs = document.querySelectorAll(".message-main2 .main2-imgs img");
console.log(main2imgs);
let main2boximg2 = document.querySelectorAll(".main2-box .main2-box-img2");
let main2boximg1 = document.querySelectorAll(".main2-box .main2-box-img1");
let main2box = document.querySelectorAll(".message-main2 .main2-box");
console.log(main2boximg2);
let flags = true;
let k = 0;
main2box.forEach((box,index)=>{
    box.onmouseover = function () {
        if(index == 0){
            main2boximg1[index].style.display = "none";
            main2boximg2[index].style.cssText = "transition-duration:0.3s;";
            main2boximg2[index].style.display = "block";
            main2imgs[index + 1].style.cssText = "transition-duration:0.3s;";
            main2imgs[index + 1].style.display = "block";
            //    第2,3,4个消失
            main2boximg1[index + 1].style.display = "block";
            main2boximg2[index + 1].style.cssText = "transition-duration:0.3s;";
            main2boximg2[index + 1].style.display = "none";
            main2imgs[index + 2].style.cssText = "transition-duration:0.3s;";
            main2imgs[index + 2].style.display = "none";

            main2boximg1[index + 2].style.display = "block";
            main2boximg2[index + 2].style.cssText = "transition-duration:0.3s;";
            main2boximg2[index + 2].style.display = "none";
            main2imgs[index + 3].style.cssText = "transition-duration:0.3s;";
            main2imgs[index + 3].style.display = "none";

            main2boximg1[index + 3].style.display = "block";
            main2boximg2[index + 3].style.cssText = "transition-duration:0.3s;";
            main2boximg2[index + 3].style.display = "none";
            main2imgs[index + 4].style.cssText = "transition-duration:0.3s;";
            main2imgs[index + 4].style.display = "none";

        }else if(index == 1){
            main2boximg1[index].style.display = "none";
            main2boximg2[index].style.cssText = "transition-duration:0.3s;";
            main2boximg2[index].style.display = "block";
            main2imgs[index + 1].style.cssText = "transition-duration:0.3s;";
            main2imgs[index + 1].style.display = "block";
            //    更换1，3,4,
            main2boximg1[index - 1].style.display = "block";
            main2boximg2[index - 1].style.cssText = "transition-duration:0.3s;";
            main2boximg2[index - 1].style.display = "none";
            main2imgs[index ].style.cssText = "transition-duration:0.3s;";
            main2imgs[index ].style.display = "none";

            main2boximg1[index + 1].style.display = "block";
            main2boximg2[index + 1].style.cssText = "transition-duration:0.3s;";
            main2boximg2[index + 1].style.display = "none";
            main2imgs[index + 2].style.cssText = "transition-duration:0.3s;";
            main2imgs[index + 2].style.display = "none";

            main2boximg1[index + 2].style.display = "block";
            main2boximg2[index + 2].style.cssText = "transition-duration:0.3s;";
            main2boximg2[index + 2].style.display = "none";
            main2imgs[index + 3].style.cssText = "transition-duration:0.3s;";
            main2imgs[index + 3].style.display = "none";

        }else if(index == 2){
            main2boximg1[index].style.display = "none";
            main2boximg2[index].style.cssText = "transition-duration:0.3s;";
            main2boximg2[index].style.display = "block";
            main2imgs[index + 1].style.cssText = "transition-duration:0.3s;";
            main2imgs[index + 1].style.display = "block";
            main2imgs[index -2].style.display = "none";
            //    更换1,2,4
            main2boximg1[index - 2].style.display = "block";
            main2boximg2[index - 2].style.cssText = "transition-duration:0.3s;";
            main2boximg2[index - 2].style.display = "none";
            main2imgs[index -1].style.cssText = "transition-duration:0.3s;";
            main2imgs[index -1].style.display = "none";

            main2boximg1[index - 1].style.display = "block";
            main2boximg2[index - 1].style.cssText = "transition-duration:0.3s;";
            main2boximg2[index - 1].style.display = "none";
            main2imgs[index ].style.cssText = "transition-duration:0.3s;";
            main2imgs[index ].style.display = "none";

            main2boximg1[index + 1].style.display = "block";
            main2boximg2[index + 1].style.cssText = "transition-duration:0.3s;";
            main2boximg2[index + 1].style.display = "none";
            main2imgs[index + 2].style.cssText = "transition-duration:0.3s;";
            main2imgs[index + 2].style.display = "none";

        }else if(index == 3){
            main2boximg1[index].style.display = "none";
            main2boximg2[index].style.cssText = "transition-duration:0.3s;";
            main2boximg2[index].style.display = "block";
            main2imgs[index + 1].style.cssText = "transition-duration:0.3s;";
            main2imgs[index + 1].style.display = "block";
            main2imgs[index -3].style.display = "none";
            //更换1,2,3
            main2boximg1[index - 3].style.display = "block";
            main2boximg2[index - 3].style.cssText = "transition-duration:0.3s;";
            main2boximg2[index - 3].style.display = "none";
            main2imgs[index -2].style.cssText = "transition-duration:0.3s;";
            main2imgs[index -2].style.display = "none";

            main2boximg1[index - 2].style.display = "block";
            main2boximg2[index - 2].style.cssText = "transition-duration:0.3s;";
            main2boximg2[index - 2].style.display = "none";
            main2imgs[index -1].style.cssText = "transition-duration:0.3s;";
            main2imgs[index -1].style.display = "none";

            main2boximg1[index - 1].style.display = "block";
            main2boximg2[index - 1].style.cssText = "transition-duration:0.3s;";
            main2boximg2[index - 1].style.display = "none";
            main2imgs[index ].style.cssText = "transition-duration:0.3s;";
            main2imgs[index ].style.display = "none";
        }


    }
})




//   第二个框
let lboxtoplis = document.querySelectorAll(".lbox-top-ul li");
let rboximgs = document.querySelectorAll(".rbox-imgboxs .imgbox");
let input = document.querySelector(".lbox-bottom input");
let flag1 = true;
lboxtoplis.forEach((li,index)=>{
    li.onmouseover = function (){
        rboximgs[index].style.cssText = "transition-duration:0.3s;";
        rboximgs[index].style.top = "45px";
    }
    li.onmouseout = function (){
        rboximgs[index].style.cssText = "transition-duration:0.3s;";
        rboximgs[index].style.top = "100%";
    }
})
input.onclick = function (){
    flag1 = !flag1;
    if(flag1){
        rboximgs[4].style.cssText = "transition-duration:0.2s;";
        rboximgs[4].style.top = "100%";
    }else{
        rboximgs[4].style.cssText = "transition-duration:0.2s;";
        rboximgs[4].style.top = "45px";
    }
}

//第三个框
let meetingimg1 = document.querySelector(".meeting-limgs .meeting-img1");
let meetingimg2 = document.querySelector(".meeting-limgs .meeting-img2");
let meetingimg3 = document.querySelector(".meeting-limgs .meeting-img3");
let meetingrtexts = document.querySelectorAll(".meeting-right .meeting-rtext");
let meetingspans = document.querySelectorAll(".meeting-rtext span");
let meetingright = document.querySelector(".meeting .meeting-right");
meetingrtexts.forEach((rtext,index)=>{
    rtext.onmouseover = function (){
        if(index == 0){
            meetingimg1.style.cssText = "transition-duration:0.3s;";
            meetingimg1.style.display = "block";
            meetingimg2.style.display = "none";
            meetingimg3.style.display = "none";
            meetingspans[index + 2].style.color = "black";
            meetingspans[index + 2].style.fontSize = "16px";
            /*更换2,3的背景*/
            meetingspans[index].style.backgroundImage = "url(img/hslimg/TB1lsuJGmf2gK0jSZFPXXXsopXa-48-48.png)";
            meetingspans[index + 1].style.backgroundImage = "url(img/hslimg/TB1YoaJGoT1gK0jSZFhXXaAtVXa-46-46.png)";
            meetingspans[index + 3].style.backgroundImage = "url(img/hslimg/TB1uSGIGoT1gK0jSZFrXXcNCXXa-48-48.png)";
        }else if(index == 1){
            meetingimg2.style.cssText = "transition-duration:0.3s;";
            meetingimg2.style.display = "block";
            meetingimg1.style.display = "none";
            meetingimg3.style.display = "none";
            meetingspans[index +1].style.color = "dodgerblue";
            meetingspans[index +1].style.fontSize = "20px";
            //更换1,3的背景
            meetingspans[index].style.backgroundImage = "url(img/hslimg/TB1iqeMGhv1gK0jSZFFXXb0sXXa-48-48.png)";
            meetingspans[index-1].style.backgroundImage = "url(img/hslimg/TB1NweHGXT7gK0jSZFpXXaTkpXa-48-48.png)";
            meetingspans[index + 2].style.backgroundImage = "url(img/hslimg/TB1uSGIGoT1gK0jSZFrXXcNCXXa-48-48.png)";

        }else if(index == 2){
            meetingimg3.style.cssText = "transition-duration:0.3s;";
            meetingimg3.style.display = "block";
            meetingimg1.style.display = "none";
            meetingimg2.style.display = "none";
            meetingspans[index ].style.color = "black";
            meetingspans[index ].style.fontSize = "16px";
            //更换1,2的背景
            meetingspans[index+1].style.backgroundImage = "url(img/hslimg/TB1IcOLGkL0gK0jSZFxXXXWHVXa-48-48.png) ";
            meetingspans[index-2].style.backgroundImage = "url(img/hslimg/TB1YoaJGoT1gK0jSZFhXXaAtVXa-46-46.png)";
            meetingspans[index-1].style.backgroundImage = "url(img/hslimg/TB1NweHGXT7gK0jSZFpXXaTkpXa-48-48.png)";
        }
    }
})

//客户案例
let caseboxspans = document.querySelectorAll(".casebox-sdiv span img");
let caseboxlis = document.querySelectorAll(".case-box-ul li");
let casesbox = document.querySelector(".case-sbox");
let casesboxborder = document.querySelector(".case-bigbox .case-border");
caseboxlis.forEach((li,index)=>{
    li.onmouseover = function (){

        caseboxspans[index].style.cssText = "transition-duration:0.3s; margin-left:15px;";
    }
})
caseboxlis.forEach((li,index)=>{
    li.onmouseout = function (){
        caseboxspans[index].style.cssText = "transition-duration:0.3s; margin-left:5px;";
    }
})
casesbox.onmouseover = function (){
    console.log("aaaaa");
    casesboxborder.style.cssText = "transition-duration:0.3s; width:80px;";
}
casesbox.onmouseout = function (){
    casesboxborder.style.cssText = "transition-duration:0.3s; width:0px;";
}

//解决方案
let plansboxlis = document.querySelectorAll(".plan-sbox-ul li");
let spanimgs = document.querySelectorAll(".plansbox-lidiv-fbox span img");
plansboxlis.forEach((li,index)=>{
    li.onmouseover = function (){
        li.querySelector(".plansbox-lidiv-fbox span img").style.cssText = "transition-duration:0.3s; margin-left:18px;";
    }
    li.onmouseout = function (){
        li.querySelector(".plansbox-lidiv-fbox span img").style.cssText = "transition-duration:0.3s; margin-left:8px;";
    }
})